<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>故障检测与诊断-v1.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/js/iCheck/flat/all.css" >
    <link rel="stylesheet" href="assets/js/iCheck/line/all.css" >
    <link rel="stylesheet" href="assets/js/validate/validate.css" >
    <link rel="stylesheet" href="assets/js/idealform/css/jquery.idealforms.css" >
    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.css">
    <link rel="stylesheet" href="plugins/footable/css/footable.bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable.standalone.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css">
    <link rel="stylesheet" href="assets/js/footable/css/footable-demos.css" > 
    <link rel="stylesheet" href="css/custom.css" > 
            
	<link href="css/datepicker3.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
    <!-- title蓝色小图标 -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
    <style>
    	.div select{width:200px;}
		.div select option{width:150px;height:30px;}
    </style>
    
</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <script type="text/javascript" src="common/public/header.js"></script>
    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <script type="text/javascript" src="common/public/slider.js"></script>
    <!-- END OF SIDE MENU -->

    <!--  PAPER WRAP -->
    <div class="wrap-fluid" >
        <div class="container-fluid paper-wrap bevel tlbr">
			<!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <span class="entypo-menu"></span>
                            <span>集群信息
                            </span>
                        </h2>

                    </div>

                    <div class="col-sm-7">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="tittle-middle-header">
                      </div>

                    </div>
                    <div class="col-sm-2">
                        <div class="devider-vertical visible-lg"></div>
                      </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <!-- lxk导航栏 -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">监控</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">集群组件监控</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">集群监控</a>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->


            <div class="content-wrap" >
            			<!-- 关闭栏 -->
                        <div class="nest" id="FootableClose">
                        	<!-- 条 -->
                            <div class="title-alt">
                              <h6>集群监控</h6>
                                <div class="titleClose">
                                    <a class="gone" href="#FootableClose">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#Footable">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>

                            </div>
                            
                            <div style="height:100%; min-height:1280px;"> 
                            	<!-- 基础 -->
	                               	<!--border:1px solid red  -->
	                               		<div id="cpu_container" class="col-lg-6 col-md-6 "></div>
	                               		<div id="memory_container" class="col-lg-6 col-md-6"></div>
	                               		<div id="network_container" class="col-lg-6 col-md-6 "></div>
	                               		<div id="storage_container" class="col-lg-6 col-md-6 "></div>
		                               	<br>
		                               	<div class="col-lg-12 col-md-12">
			                               	<div>
												<h4 align="center">集群组件状态表</h4>
											</div>
			                               	<div >
					                            <table  id="cluster_table" class="table"  data-filtering="true" data-paging="true" >
				                                   <thead>
				                                   	   <tr >
					                                   		<th >组件名称</th>
					                                   		<th >状态信息</th>
					                                   </tr>
				                                   </thead>
				                                   <tbody  id="cluster_table_body"></tbody>
				                                    
				                                </table>
			                                </div>
	                               		</div>
                            </div>  
                        </div>
            </div>


            <!-- /END OF CONTENT -->

<!-- 进程搜索模块 -->

            <!-- 进程搜索模块结束 -->

            <!-- FOOTER -->
            <div class="footer-space"></div>
            <div id="footer">
                <div class="devider-footer-left"></div>
               
            </div>
            <!-- / END OF FOOTER -->


        </div>
    </div>
    <!--  END OF PAPER WRAP -->

	<!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
	
	<!-- 图表插件 -->
	<script type="text/javascript" src="plugins/highcharts/highcharts.js"></script>
	<!-- <script src="http://github.highcharts.com/master/modules/no-data-to-display.src.js"></script> -->
	
    <!-- MAIN EFFECT -->
   <script type="text/javascript" src="assets/js/preloader.js"></script>
   <script type="text/javascript" src="assets/js/bootstrap.js"></script>
   <script type="text/javascript" src="assets/js/app.js"></script>
   <script type="text/javascript" src="assets/js/load.js"></script>
   <script type="text/javascript" src="assets/js/main.js"></script>

   <!-- /MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/iCheck/jquery.icheck.js"></script>
    <script type="text/javascript" src="assets/js/switch/bootstrap-switch.js"></script>
    
    <!--表格相关的js  -->
    <script src="plugins/footable/3.1.6/footable.min.js"></script>
	<script src="plugins/footable/3.1.6/footable.js"></script>
	<script src="assets/js/footable/js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
	<script src="assets/js/footable/js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
	<script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
    

	<!--表数据显示 -->
	//<!--   common/rule/ruleShow2.js-->
	<script type="text/javascript" src="common/monitor/clusterMonitor.js"></script> 

</body>

</html>
